<template>
  <div class="home">
    <div class="page-header">
      <div class="header-content">
        <img src="/images/logo.png" alt="" class="logo">
        <span class="slogan">聚往酬薪 赋古烁金</span>
      </div>
    </div>
    <div class="section">
      <div class="content">
        <div class="left">
          <div class="subtitle">人力资源用工服务平台</div>
          <div class="slogan">基于SaaS的人力资源用工生态智能解决方案<br>标准化、个性化、专业化一站式代缴服务</div>
        </div>
        <div class="right">
          <div class="tab">
            <div class="button" @click="active = 'company'" :class="[active === 'company' ? 'active' : '']">
              企业登录
            </div>
            <!--
            <div class="button" @click="active = 'personal'" :class="[active === 'personal' ? 'active' : '']">
              个人登录
            </div>
            -->
          </div>
          <div class="content">
            <login-component @active="handleActive" :active="active"></login-component>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-content">
        <div class="item">
          <img src="/images/footer-icon1.png" alt="" class="icon">
          <div class="desc">
            <div class="title">法规层</div>
            <div class="txt">遵守政策界标准</div>
            <div class="txt">合法合规流程</div>
          </div>
        </div>
        <div class="item">
          <img src="/images/footer-icon2.png" alt="" class="icon">
          <div class="desc">
            <div class="title">流程</div>
            <div class="txt"></div>
            <div class="txt" style="margin-top: -15px;">电签流程极简</div>
          </div>
        </div>
        <div class="item">
          <img src="/images/footer-icon3.png" alt="" class="icon">
          <div class="desc">
            <div class="title">支付</div>
            <div class="txt">国家大型银行接口</div>
            <div class="txt">支持支付宝，微信批量</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LoginComponent from '../login/components/login'
export default {
  name: 'home',
  components: {
    LoginComponent
  },
  data() {
    return {
      active: 'company'
    }
  },
  methods: {
    handleActive(name) {
      this.$router.replace(`/${this.active}/auth/${name}`)
    }
  },
  mounted () {
  }
}
</script>
<style lang="less" scoped>
.home {
  min-width: 1500px;
  height: 100vh;
  overflow: hidden;
}
.page-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  .header-content {
    height: 100%;
    width: 1500px;
    margin: 0 auto;
    padding: 15px 0;
    .logo {
      height: 64px;
      float: left;
    }
    .slogan {
      float: left;
      font-size: 14px;
      color: #7e7e7e;
      margin-left: 40px;
      margin-top: 15px;
    }
  }
}
.section {
  padding: 0;
  height: calc(100vh);
  background: url('/images/banner.png') no-repeat center center;
  background-size: cover;
  color: #fff;
  .content {
    width: 1500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 64px;
  }
  .left {
    height: 450px;
    animation: fadeIn 1s;
    .title {
      font-size: 30px;
      color: #00e0ff;
    }
    .subtitle {
      font-size: 30px;
      color: #fff;
      margin-top: 10px;
    }
    .slogan {
      margin-top: 60px;
      position: relative;
      padding-top: 30px;
      line-height: 40px;
      font-size: 20px;
      color: #5f5f5f;
      &::after {
        content: "";
        width: 145px;
        height: 4px;
        position: absolute;
        background-color: #5f5f5f;
        left: 0;
        top: 0;
      }
    }
  }
  .right {
    // float: right;
    width: 400px;
    border: 1px solid #2d2c32;
    box-sizing: border-box;
    padding: 35px 30px 40px;
    background: rgba(19, 18, 24, .9);
    .tab {
      display: flex;
      height: 30px;
      font-size: 20px;
      .button {
        flex: 1;
        text-align: center;
        color: #5d5d5d;
        cursor: pointer;
        transition: all .2s ease;
        &.active {
          color: #c7c7c7;
        }
      }
    }
    .content {
      width: 100%;
      margin-top: 30px;
      padding: 0;
      /deep/ .el-input__inner {
        color: #fff;
        background-color: #1b1a20;
        border-color: transparent;
        &:-internal-autofill-selected {
          background-color: transparent!important;
        }
      }
    }
  }
}
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  height: 70px;
  padding: 10px 0;
  background: rgba(13, 13, 14, .7);
  .footer-content {
    display: flex;
    height: 70px;
    margin: 0 auto;
  }
  .item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      display: block;
      margin-right: 30px;
      max-width: 65px;
      max-height: 65px;
    }
    .desc {
      color: #fff;
      margin: 0;
      .title {
        font-size: 18px;
        margin: 0;
      }
      .txt {
        font-size: 12px;
        height: 18px;
        line-height: 18px;
      }
    }
  }
}
@media only screen and (max-width: 1500px) {
  .home {
    min-width: 1200px;
  }
  .page-header {
    .header-content {
      width: 1200px;
    }
  }
  .section {
    .content {
      width: 1200px;
    }
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0.4;
    transform: translateY(50px);
  } 100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
